<template>
    <view class="book-detail-wrapper">
       <view class="detail-header">
           <view class="header-blue"></view>
           <view class="book-image">
               <image :src="bookDetail.itemsHead"/>
           </view>
       </view>
        <view class="common-division"/>
        <view class="detail-book-info">
            <view class="title">
                {{bookDetail.itemsName || ''}}
            </view>
            <view class="content">
                {{bookDetail.itemsIntroduction || '暂无书单介绍'}}
            </view>
        </view>
        <view class="common-division"/>
        <mescroll-uni  @up="upCallback" :up="upOption" @down="downCallback"  :down="downOption" class="mescroll-flex" :fixed="false" @init="mescrollInit">
            <view class="book-recommoned-list common-interval">
                <shopBookCard @linkTo="linkTo" @updateBooks="updateBook" v-for="(item, index) in bookList" :item="item" :key="index"/>
            </view>
        </mescroll-uni>
        <view class="book-detail common-fixed fix">
            <text class="detail-num">本书单共包含{{bookList.length}}本书</text>
            <text class="common-bottom-btn" @tap.stop="allAddShopping">{{shopTxt}}</text>
        </view>
        <gw-user-login ref="userLogin" modalType="login"/>
    </view>
</template>

<script>
    import shopBookCard from './shop-book-card'
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import gwUserLogin from '@/pages/components/gw-user-login'
    import { mapGetters } from 'vuex'
    import service from "@/service";
    import { getShoppingNum } from "@/util/commonFn";
    export default {
        name: "index",
        components: {shopBookCard, MescrollUni, gwUserLogin},
        onShow(){
        },
        computed: {
            ...mapGetters(['login'])
        },
        onLoad(params){
            let { id } = params;
            this.itemsId = id;
            this.getBookDetail();
        },
        data(){
            return{
                bookList: [],
                bookDetail: {},
                itemsId: '',
                shopTxt: '全部加入书筐',
                status: 0,
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true,
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null,
                page: 1,
                limit: 16
            }
        },
        methods: {
            linkTo(item){
                uni.navigateTo({
                    url: `../../components/gw-book-detail?booksId=${item.booksId}`
                })
            },
            downCallback(mescroll){
                this.bookList = [];
                this.page = 1;
                mescroll.resetUpScroll();
            },
            updateBook(){
                this.getBooks({
                    page: 1,
                    limit: this.bookList.length,
                    itemsId: this.itemsId
                })
            },
            getBooks (para) {
                // 获取名片完整信息
                uni.showLoading({
                    title: '加载中',
                });
                let params = para || {
                    itemsId: this.itemsId,
                    page: this.page,
                    limit: this.limit
                }
                service.homeService.getBooks({
                    data: params,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            (this.page > 1 && para) ? this.bookList.push(...data) : this.bookList = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            addShopping () {
                if(this.status === 1){
                    uni.showToast({
                        title: `已全部加入书筐哦`,
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
                uni.showLoading({
                    title: '',
                });
                let params = {
                    itemsId: Number(this.itemsId),
                }
                service.homeService.addShopping({
                    data: params,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.getBooks();
                            this.shopTxt = '已全部加入书筐'
                            this.status = 1
                            getShoppingNum()
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            // 获取书单详情
            getBookDetail () {
                uni.showLoading({
                    title: '加载中',
                });
                let params = {
                    itemsId: this.itemsId
                }
                service.homeService.bookDetail({
                    data: params,
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result || {};
                            this.bookDetail = data;
                            uni.setNavigationBarTitle({
                                title: `${data.itemsName||'书单标题'}`
                            });
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                this.getBooks();
            },
            allAddShopping(){
                if(!this.login){
                    this.$refs.userLogin.showModal = true;
                    return;
                }
                this.addShopping();
            }
        }
    }
</script>

<style scoped lang="scss">
    .book-detail-wrapper{
        .detail-header{
            height: 615rpx;
            position: relative;
            background: #fff;
            .header-blue{
                height: 405rpx;
                background:rgba(43,168,252,1);
            }
            .book-image{
                position: absolute;
                top: 95rpx;
                left: 30rpx;
                width:690rpx;
                height:520rpx;
                border-radius:20rpx;
                image{
                    width: 100%;
                    height: 100%;
                    border-radius:20rpx;
                }
            }
        }
        .detail-book-info{
            padding: 20rpx 30rpx;
            .title{
                font-size:34rpx;
                font-weight:bold;
                color:rgba(51,51,51,1);
            }
            .content{
                font-size:28rpx;
                font-weight:400;
                color:rgba(51,51,51,1);
                margin-top: 20rpx;
            }
        }
        .book-recommoned-list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            /*padding-bottom: 120rpx;*/
            box-sizing: border-box;
            padding-top: 20rpx;
        }
        .book-detail{
            .detail-num{
                font-size:28rpx;
                line-height:40rpx;
                color:rgba(153,153,153,1);
                margin-left: 20rpx;
            }
        }
    }
</style>